<script>
  function selectDiv(id) {
    clearAllColors();
    $('#' + id).css('background-color', 'rgba(0,0,0,0.1)');
    $('#tmpDiv').html('#' + id);
  }

  function clearAllColors() {
    $('#selectedDiv .tmp').css('background-color', 'transparent');
    $('#mainDiv .tmp').css('background-color', 'transparent');
  }

  function addElem() {
    var tmp = $("<div/>").append($($("#tmpDiv").html()).clone()).html();
//    var tmp = $($('#tmpDiv').html()).;
    $($('#tmpDiv').html()).remove();
    $('#selectedDiv').html($('#selectedDiv').html() + tmp);
    $($('#tmpDiv').html()).attr('onclick', 'selectRemove(this.id)');
    $($('#tmpDiv').html()).css('background-color', 'transparent');
  }

  function selectRemove(id) {
    $('#' + id).css('background-color', 'rgba(0,0,0,0.1)');
    $('#removeElem').html('#' + id);
  }


  function removeElem() {
    var tmp = $("<div/>").append($($("#removeElem").html()).clone()).html();
    $($('#removeElem').html()).remove();
    $('#mainDiv').html($('#mainDiv').html() + tmp);
    $($('#removeElem').html()).attr('onclick', 'selectDiv(this.id)');
    $($('#removeElem').html()).css('background-color', 'transparent');
  }

  function addAll() {
    if ($('#mainDiv').html()) {
      $('#selectedDiv').html($('#mainDiv').html());
      $('#mainDiv').html(null);
      $('#selectedDiv .tmp').attr('onclick', 'selectRemove(this.id)');
      $('#selectedDiv .tmp').css('background-color', 'transparent');
    }
  }

  function removeAll() {
    if ($('#selectedDiv').html()) {
      $('#mainDiv').html($('#selectedDiv').html());
      $('#selectedDiv').html(null);
      $('#mainDiv .tmp').attr('onclick', 'selectDiv(this.id)');
      $('#mainDiv .tmp').css('background-color', 'transparent');
    }
  }
  //
  //  function showFieldSelect() {
  //    if (!($('#rootTitleInput').val() == "")) {
  //      $('#fields').show();
  //    } else {
  //      $('#fields').hide();
  //    }
  //  }

  function loadFields() {
    $.ajax(
        {
          url: '?listGen&act=gfl',
          type: 'post',
          data: {sectionId: $('#sectionId').val()},
          beforeSend: function () {
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#mainDiv").html(response);
          $("#rootTitle").show();
          $('#removeElem').html(null);
          $('#selectedDiv').html(null);
          $('#loading').hide();
        });
  }

  function submitRootForm() {
    if (!($('#selectedDiv').html() == "")) {
      var needle = $('#selectedDiv').children();
      var result = "";
      for (var i = 0; i < needle.length; i++) {
        result += ", " + needle[i].id;
      }
      $('#hiddenFields').val(result);
      $('#addRootForm').submit();
    }
  }
</script>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaksei Lazerka
 * Date: 10/22/14
 * Time: 6:57 PM
 */

$result = getMainCategories();

$output = "<select id='sectionId' name='sectionId' onchange='loadFields()'>";

$output .= "<option style='text-align: center'>-- Выберите вариант из списка --</option>";

while ($row = mysql_fetch_assoc($result)) {
  $output .= "<option value='" . $row['ID'] . "'>" . $row['TITLE'] . "</option>";
}

$output .= "</select>";

?>
<form method="post" id="addRootForm" action="?alr">
  <div class="step">
    <div class="stepInfo">
      1. Выберите категорию, в которую Вы хотите добавить новый корневой элемент списка:
    </div>
    <div class="stepSelect"><?= $output ?></div>
  </div>
  <div class="step" id="rootTitle">
    <div class="stepInfo">
      2. Введите название нового корневого элемента списка:
    </div>
    <div class="stepSelect">
      <input type="text" name="rootTitle"
             id="rootTitleInput"/>
    </div>
  </div>
  <div class="step" id="fields">
    <div class="stepInfo">
      3. Выберите поля в таблице для данного корневого элемента:
    </div>
    <div style="margin-top: 20px; margin-left: auto; margin-right: auto">
      <div id="mainDiv" class="selectDiv">
      </div>

      <div class="selectButtonDiv">
        <div>
          <input type="button" onclick="addAll()" value=">>"/>
        </div>
        <div>
          <input type="button" onclick="addElem()" value=">"/>
        </div>
        <div>
          <input type="button" onclick="removeElem()" value="<"/>
        </div>
        <div>
          <input type="button" onclick="removeAll()" value="<<"/>
        </div>
      </div>

      <div id="selectedDiv" class="selectDiv">
      </div>
    </div>
    <div id="tmpDiv" style="display: none">
    </div>
    <div id="removeElem" style="display: none">
    </div>
  </div>
  <input type="hidden" name="fields" id="hiddenFields">
  <input type="button" value="Добавить" onclick="userAsk('Внимание ! Проверьте выбранные поля. Название нового корневого элемента списка и поля для корневого элемента списка должны быть заполнены. Если Вы готовы продолжить нажмите Добавить',submitRootForm)">
</form>
